<template>
	<view class="user-profile">
		<!-- 用户头像 -->
		<view class="profile-section avatar-section">
			<text class="label">头像</text>
			<image 
				class="avatar" 
				:src="userInfo.avatar || '/static/default-avatar.png'" 
				mode="aspectFill"
			></image>
		</view>

		<!-- 用户名 -->
		<view class="profile-section">
			<text class="label">用户名</text>
			<text class="value">{{ userInfo.username || '未设置' }}</text>
		</view>

		<!-- 手机号 -->
		<view class="profile-section">
			<text class="label">手机号</text>
			<text class="value">{{ userInfo.mobile || '未绑定手机' }}</text>
		</view>

		<!-- 邮箱 -->
		<view class="profile-section">
			<text class="label">邮箱</text>
			<text class="value">{{ userInfo.email || '未填写' }}</text>
		</view>

		<!-- 注册时间 -->
		<view class="profile-section">
			<text class="label">注册时间</text>
			<text class="value">{{ formatTime(userInfo.createTime) }}</text>
		</view>

		<!-- 状态 -->
		<view class="profile-section">
			<text class="label">状态</text>
			<text class="value">{{ statusText(userInfo.status) }}</text>
		</view>

		<!-- 编辑按钮 -->
		<button class="edit-btn" @click="handleEdit">
			<text class="iconfont icon-edit"></text>
			<text>编辑资料</text>
		</button>
	</view>
</template>

<script>
export default {
	data() {
		return {
			userInfo: {} // 不再需要 userId
		}
	},
	onLoad() {
		// 从本地缓存获取用户信息
		const cachedUserInfo = uni.getStorageSync('userInfo');
		
		if (cachedUserInfo) {
			this.userInfo = cachedUserInfo;
		} else {
			uni.showToast({
				title: '未找到用户信息',
				icon: 'none'
			});
		}
	},
	methods: {
		// 跳转到编辑页时也需要用户 ID
		handleEdit() {
			const cachedUserInfo = uni.getStorageSync('userInfo');
			if (cachedUserInfo && cachedUserInfo._id) {
				uni.navigateTo({
					url: `/pages/mine/user-edit?id=${cachedUserInfo._id}`
				});
			} else {
				uni.showToast({
					title: '无法获取用户ID',
					icon: 'none'
				});
			}
		},

		// 格式化时间戳为可读格式
		formatTime(timestamp) {
			if (!timestamp) return '暂无记录';
			const date = new Date(timestamp);
			return `${date.getFullYear()}-${String(date.getMonth()+1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')} ${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`;
		},

		// 状态文本映射
		statusText(status) {
			switch (status) {
				case 0:
					return '禁用';
				case 1:
					return '正常';
				default:
					return '未知';
			}
		}
	}
}
</script>

<style scoped>
.user-profile {
	padding: 40rpx;
	background-color: #f8f9fc;
	min-height: 100vh;
}

.profile-section {
	background-color: #fff;
	margin-bottom: 30rpx;
	padding: 30rpx;
	border-radius: 16rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.label {
	font-size: 28rpx;
	color: #666;
	width: 160rpx;
}

.value {
	font-size: 28rpx;
	color: #333;
	flex: 1;
	text-align: right;
}

.avatar-section {
	display: flex;
	align-items: center;
	justify-content: flex-start;
}

.avatar {
	width: 120rpx;
	height: 120rpx;
	border-radius: 50%;
	margin-left: 20rpx;
}

.edit-btn {
	background-color: #4a6ee0;
	color: #fff;
	margin-top: 60rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}

.edit-btn .iconfont {
	margin-right: 10rpx;
	font-size: 32rpx;
}
</style>